<template>
	<view class="container">
		<!-- 顶部Tab切换 - 固定 -->
		<view class="tab-section fixed-tab">
			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" :scrollable="false" lineColor="#2979ff"
				:activeStyle="{ color: '#2979ff', fontWeight: 'bold', transform: 'scale(1.05)' }"
				:inactiveStyle="{ color: '#666', transform: 'scale(1)' }"
				itemStyle="padding-left: 0; padding-right: 0; height: 80rpx;"></u-tabs>
		</view>

		<!-- 内容区域 -->
		<view class="content-with-tab">
			<!-- 任务列表：scroll-view保持原有配置 -->
			<scroll-view class="task-list" scroll-y @scrolltolower="loadMore" :refresher-enabled="true"
				:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
				<!-- 任务项 -->
				<view v-for="task in taskList" :key="task.id" class="task-item" @click="viewTaskDetail(task)">
					<view class="task-header">
						<view class="task-title-section">
							<text class="task-name">{{ task.taskName }}</text>
						</view>
						<view class="task-status">
							<u-tag :text="task.priorityText" :type="getPriorityType(task.priority)" size="mini"
								class="priority-tag"></u-tag>
						</view>
					</view>

					<view class="task-time">
						<u-icon name="clock" size="16" color="#999"></u-icon>
						<text class="time-text"> {{task.startTime}} - {{task.endTime}}</text>
					</view>

					<view class="task-progress">
						<view class="progress-info">
							<text class="progress-label">任务进度</text>
							<text class="progress-value">{{ task.totalProgress || 0}}%</text>
						</view>
						<view class="progress-bar">
							<view class="progress-fill"
								:style="{ width: (task.totalProgress || 0) + '%', backgroundColor: getProgressColor(task.progress) }">
							</view>
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="load-more" v-if="loading && taskList.length >= 0">
					<u-loading-icon size="20"></u-loading-icon>
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 无更多数据 -->
				<view class="no-more" v-if="!hasMore && taskList.length > 0">
					<text class="no-more-text">没有更多任务了</text>
				</view>

				<!-- 空状态（无数据且非加载中） -->
				<view class="empty-state" v-if="taskList.length === 0 && !loading">
					<u-icon name="list" size="120" color="#ccc"></u-icon>
					<text class="empty-text">
						{{ getEmptyText() }}
					</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		selectMyTasks
	} from '@/common/api/renwu.js'
	export default {
		data() {
			return {
				// Tab 数据：value与接口状态参数对应（1-未完成，2-已完成，3-转移任务）
				tabList: [{
						name: '未完成',
						value: 1
					},
					{
						name: '已完成',
						value: 2
					},
					{
						name: '转移任务',
						value: 3
					}
				],
				currentTab: 0, // 当前激活的Tab索引

				// 任务列表与分页核心参数
				taskList: [], // 最终渲染的任务列表
				pageNum: 1, // 当前页码（从1开始，修复原代码page变量错误）
				pageSize: 10, // 每页条数
				total: 0, // 接口返回的总数据条数（判断是否有更多）
				hasMore: true, // 是否还有更多数据
				loading: false, // 加载中锁（防止重复请求）
				refreshing: false, // 下拉刷新状态
				type: 1
			}
		},
		computed: {
			// 当前Tab对应的接口状态参数（从tabList取value，无需硬编码）
			currentTaskStatus() {
				return this.tabList[this.currentTab].value
			}
		},
		onLoad(options) {
			// 页面加载时获取第一页数据
			if (options) {
				this.type = options.type
			}
			this.loadTaskList()
		},
		methods: {
			/**
			 * 核心：加载任务列表（对接真实接口）
			 * @param {Boolean} isRefresh 是否下拉刷新（重置页码）
			 */
			async loadTaskList(isRefresh = false) {
				// 1. 防止重复请求
				if (this.loading) return
				this.loading = true

				// 2. 下拉刷新时重置分页参数
				if (isRefresh) {
					this.pageNum = 1
					this.taskList = []
					this.hasMore = true
				}

				try {
					// 3. 构造接口请求参数（状态+分页）
					const params = {
						status: this.currentTaskStatus, // 当前Tab对应的任务状态
						pageNum: this.pageNum, // 当前页码
						pageSize: this.pageSize, // 每页条数
						type: this.type, // 1专项活动 2常规营销 3日常维护 4网格管理
						sourceType: 1, ////（0 开门红业务上报 1 我的任务业绩上报）

					}

					// 4. 调用真实接口（替换原mock逻辑，使用async/await正确处理异步）
					const res = await selectMyTasks(params)
					// 假设接口返回格式：{ code: 200, data: { total: 总条数, records: 任务列表数组 } }
					const {
						total,
						records
					} = res.data

					// 5. 更新总条数和任务列表
					this.total = total
					if (isRefresh) {
						// 下拉刷新：直接覆盖数据
						this.taskList = records
					} else {
						// 触底加载：追加数据
						this.taskList = [...this.taskList, ...records]
					}

					// 6. 判断是否还有更多数据（当前列表长度 < 总条数 → 有更多）
					this.hasMore = this.taskList.length < this.total
					// 有更多数据则页码+1，准备下次加载
					if (this.hasMore) {
						this.pageNum++
					}

				} catch (error) {
					// 7. 错误处理
					console.error('加载任务列表失败:', error)
					uni.showToast({
						title: '加载失败，点击重试',
						icon: 'none',
						duration: 2000
					})
					// 错误时保持hasMore原有状态，允许用户重试
					this.hasMore = this.taskList.length < this.total

				} finally {
					// 8. 结束加载状态（无论成功/失败都执行）
					this.loading = false
					this.refreshing = false // 结束下拉刷新动画
				}
			},

			/**
			 * Tab切换事件：切换后重置数据并加载第一页
			 */
			onTabChange(e) {
				this.currentTab = e.index
				// 重置分页并加载当前Tab的第一页数据
				this.loadTaskList(true)
			},

			/**
			 * 触底加载更多：满足条件时调用加载方法
			 */
			loadMore() {
				// 条件：有更多数据 + 不在加载中 + 已有数据（避免空状态时触发）
				if (this.hasMore && !this.loading && this.taskList.length > 0) {
					this.loadTaskList()
				}
			},

			/**
			 * 下拉刷新：触发时加载第一页数据
			 */
			onRefresh() {
				// 防止与加载中冲突
				if (!this.loading) {
					this.refreshing = true
					this.loadTaskList(true)
				} else {
					// 若正在加载，直接结束刷新动画
					this.refreshing = false
				}
			},

			/**
			 * 获取优先级标签类型（适配接口返回的priority值）
			 */
			getPriorityType(priority) {
				// 假设接口返回的priority值为：high/medium/low，可根据实际调整
				const typeMap = {
					1: 'error',
					2: 'warning',
					3: 'primary'
				}
				return typeMap[priority] || 'default'
			},

			/**
			 * 获取进度条颜色
			 */
			getProgressColor(progress) {
				if (progress >= 80) return '#19be6b'
				if (progress >= 50) return '#2979ff'
				if (progress >= 20) return '#ff9900'
				return '#ff4444'
			},

			/**
			 * 获取空状态文本（根据当前Tab动态显示）
			 */
			getEmptyText() {
				const tabName = this.tabList[this.currentTab].name
				return `暂无${tabName}任务`
			},

			/**
			 * 查看任务详情
			 */
			viewTaskDetail(task) {
				if (task.phase == 0) { // 有阶段任务
					uni.navigateTo({
						url: `/homeNav/rwgl/active_jdrw?id=${task.id}&target=${task.target}&phase=${task.phase}`
					})

				} else {
					// target 阶段任务id  phase 有没有阶段任务 
					uni.navigateTo({
						url: `/homeNav/rwgl/active_rwxq?task_id=${task.id}&target=${task.target}&phase=${task.phase}`
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 原有样式不变，仅补充加载中状态在空数据时的隐藏逻辑 */
	.container {
		background-color: #f5f5f5;
		height: 100vh;
		overflow: hidden;
	}

	.fixed-tab {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.content-with-tab {
		margin-top: 80rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.task-list {
		height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
		padding: 20rpx;
		box-sizing: border-box;
	}

	.task-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		transition: all 0.3s;
	}

	.task-item:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.08);
	}

	.task-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.task-title-section {
		flex: 1;
		margin-right: 20rpx;
	}

	.task-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		line-height: 1.4;
	}

	.priority-tag {
		margin-right: 10rpx !important;
	}

	.task-time {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
		box-sizing: border-box;
	}

	.time-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

	.task-progress {
		margin-bottom: 25rpx;
	}

	.progress-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.progress-label {
		font-size: 26rpx;
		color: #666;
	}

	.progress-value {
		font-size: 26rpx;
		font-weight: 600;
		color: #333;
	}

	.progress-bar {
		height: 8rpx;
		background: #f0f0f0;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		border-radius: 4rpx;
		transition: all 0.5s ease;
	}

	.load-more,
	.no-more {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
		color: #999;
	}

	.loading-text {
		margin-left: 15rpx;
		font-size: 26rpx;
	}

	.no-more-text {
		font-size: 26rpx;
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		display: block;
		margin-top: 20rpx;
	}

	.empty-state .u-icon {
		display: flex;
		justify-content: center;
	}
</style>

<style lang="scss">
	/* 全局样式调整 */
	.u-tabs {
		padding: 0 30rpx !important;
	}

	.u-tabs__wrapper {
		height: 80rpx !important;
	}

	.u-tag {
		margin-right: 0 !important;
	}
</style>